<div class="row">
	<div class="col col-sm-6 col-xs-6">
		<a href="#ane/demo_classlinelist.html" class="btn btn-default"> &lt; 返回</a>
	</div>
	<div class="col col-sm-6 col-xs-6">
		<a href="#" class="btn btn-default pull-right"><i class="fa fa-shopping-cart"></i> 编辑页面布局</a>
	</div>
</div>
<div class="row"><br /></div>
<div class="well well-light no-padding">
	<form action="" class="smart-form" novalidate="novalidate" id="info-form">
		<div id="inbox-content" class="inbox-body">
			<div class="inbox-Right">
				<header>基本信息</header>
				<fieldset>
					<div class="col  col-6">
						<div class="row">
							<label class="label col col-4 text-align-right txt-color-red">班线名称</label>
							<section class="col col-8">
								<label class="input">
									<input type="text" name="drivername" placeholder="" value="北京-郑州-广州">
								</label>
							</section>
						</div>
					</div>
					<div class="col  col-6">
						<div class="row">
							<label class="label col col-4 text-align-right txt-color-red">所属机构</label>
							<section class="col col-8">
								<label class="select">
								<select name="org">
									<option value="0" selected="" disabled="">安能物流</option>
								</select> <i></i> </label>
							</section>
						</div>
					</div>
					<div class="col  col-6">
						<div class="row">
							<label class="label col col-4 text-align-right">班线编码</label>
							<section class="col col-8">
								<label class="input">
									<input type="text" name="drivername" placeholder="" value="bj-zz-gz">
								</label>
							</section>
						</div>
					</div>
				</fieldset>	
				<fieldset>
					<section>
						<a class="btn btn-default btn-sm" id="but_fist"> <i class="fa fa-plus-square"></i> 设置首点</a>
						<a class="btn btn-default btn-sm" id="but_pass" onclick="javascript:addZhandian();"> <i class="fa fa-plus-square"></i> 添加途经站</a>
						<a class="btn btn-default btn-sm" id="but_end"> <i class="fa fa-plus-square"></i> 设置终点</a>
					</section>
					<div class="well">
						<table class="table table-bordered" id="markers">
							<thead>
								<tr>
									<th>站点名称</th>
									<th>驶到里程</th>
									<th>驶到用时（分）</th>
									<th>停留时间（分）</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<th>北京分拨中心</th>
									<th>--</th>
									<th>--</th>
									<th>--</th>
									<th><a onclick="modal_Marker('F',true,1)" class="btn btn-default btn-xs">修改</a></th>
								</tr>
								<tr>
									<th>郑州分拨中心</th>
									<th>740</th>
									<th>600</th>
									<th>60</th>
									<th><a onclick="modal_Marker('E',true,2)" class="btn btn-default btn-xs">修改</a></th>
								</tr>
								<tr>
									<th>广州分拨中心</th>
									<th>1440</th>
									<th>1614</th>
									<th>--</th>
									<th><a onclick="modal_Marker('E',true,2)" class="btn btn-default btn-xs">修改</a></th>
								</tr>
							</tbody>
						</table>
					</div>
        		</fieldset>
        		<fieldset>
					<section>
						<a class="btn btn-default btn-sm" id="but_Line"><i class="fa fa-plus-square"></i> 绑定行驶线路</a>
					</section>
					<div class="well">
						<table class="table table-bordered" id="lines">
							<thead>
								<tr>
									<th>行驶线路名称</th>
									<th>线路里程</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody>
							</tbody>
						</table>
					</div>
        		</fieldset>
			</div>
			
		</div>		
		<footer>
			<div style="margin:0 auto">
			<button type="submit" class="btn btn-default">取消</button>
			<button type="submit" class="btn btn-default">保存并新建</button>
			<button type="submit" class="btn btn-primary">
				<i class="fa fa-save"></i>
				保存
			</button>	</div>			
		</footer>		
	</form>
	<div class="inbox-preview" id="yulanbox">
		<!-- 开始班线 -->
		<div class="well well-sm">
			<!-- Timeline Content -->
			<div class="classLine smart-timeline">
				<ul class="smart-timeline-list">
					<li class="special">
						<!-- <div class="smart-timeline-list-green"></div> -->
						<div class="smart-timeline-icon">
							<div class="timeline-icon-green"></div>
						</div>
						<div class="smart-timeline-arrow"></div>
						<div class="smart-timeline-time banxian_city padding-5">
							北京分拨中心
						</div>
						<div class="smart-timeline-content clearfix">
							<div class="col-xs-12 padding-5">
								<i class="fa fa-arrow-circle-o-down"></i> 23:00
							</div>
						</div>
					</li>
					<li>
						<!-- <div class="smart-timeline-list-green"></div> -->
						<div class="smart-timeline-content no-border row">
							<div class="col-xs-12 padding-5">
								<i class="fa fa-clock-o"></i> 10小时			
							</div>
						</div>
						<div class="smart-timeline-icon">
							<div class="timeline-icon-green"></div>
						</div>
						<div class="smart-timeline-arrow"></div>
						<div class="smart-timeline-time banxian_city padding-5">
							郑州分拨中心
						</div>
						<div class="smart-timeline-content clearfix">
							<div class="col-xs-12 padding-5">
								<p><i class="fa fa-angle-double-down"></i> 09:00 第一天 </p>
								<p><i class="fa fa-dot-circle-o"></i> 60分钟 </p>
								<i class="fa fa-angle-double-down"></i> 10:00 第二天
							</div>
						</div>
					</li>
					<li class="special s2">
						<div class="smart-timeline-content no-border row">
							<div class="col-xs-12 padding-5">
								<i class="fa fa-clock-o"></i> 24小时			
							</div>
						</div>
						<div class="smart-timeline-icon">
							<div class="timeline-icon-green"></div>
						</div>
						<div class="smart-timeline-arrow"></div>
						<div class="smart-timeline-time banxian_city padding-5">广州分拨中心</div>
						<div class="smart-timeline-content padding-5">
							<i class="fa fa-arrow-circle-o-down"></i> 10:00	第三天									
						</div>
					</li>
				</ul>
			</div>
			
			<div class="well well-sm no-border no-margin">
				<h6>总里程：2180公里</h6>
				<h6>总耗时：34小时</h6>
				<h6>停留总耗时：60分</h6>
			</div>
			<!-- END Timeline Content -->
		</div>
	  	<!-- 结束班线 -->
	</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal"  role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">选择途经站点</h4>
			</div>
			<div class="modal-body">
				<form class="smart-form" action="" id="frm_PassMarker" novalidate="novalidate">
				<div class="row">
					<div class="col-xs-12 col-sm-8 col-md-12 col-lg-12">				
						<label class="label col-xs-12 col-sm-3 text-align-right txt-color-red">途经点</label>
						<section class="col col-8">
							<label class="input">
								<div class="select2-container form-control select2-allowclear" id="s2id_Marker_P"><a tabindex="-1" class="select2-choice" onclick="return false;" href="javascript:void(0)">   <span class="select2-chosen">郑州分拨中心</span><abbr class="select2-search-choice-close"></abbr>   <span class="select2-arrow"><b></b></span></a><input type="text" class="select2-focusser select2-offscreen" id="s2id_autogen1"></div><input type="text" name="Marker_P" id="Marker_P" data-placeholder="选择站点" class="form-control select2-offscreen" tabindex="-1">
							</label>
						</section>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">				
						<label class="label col-xs-8 col-sm-3 text-align-right txt-color-red">行驶里程(公里)</label>
						<section class="col col-6">
							<label class="input">
								<input type="text" name="Mileage_P" id="Mileage_P" placeholder="行驶里程(公里)" class="form-control" value="740">
							</label>
						</section>
						<section style="" id="autocount_P_sec" class="col col-2">
								<button onclick="autoCountMileage('P')" class="btn btn-primary btn-sm" type="button">自动计算</button>
						</section>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">				
						<label class="label col-xs-8 col-sm-3 text-align-right txt-color-red ">行驶时间(分)</label>
						<section class="col col-8">
							<label class="input">
								<input type="text" name="Runtime_P" id="Runtime_P" placeholder="行驶时间(分)" class="form-control" value="600">
							</label>
						</section>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">				
						<label class="label col-xs-12 col-sm-3 text-align-right txt-color-red">停留时间(分)</label>
						<section class="col col-8">
							<label class="input">
								<input type="text" name="Stoptime_P" id="Stoptime_P" placeholder="停留时间(分)" class="form-control" value="60">
							</label>
						</section>
					</div>
				</div>
				</form>

			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary">
					保存
				</button>
				<button type="button" class="btn btn-default" data-dismiss="modal">
					取消
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- daterangepicker JS -->
<script src="js/plugin/date/moment.js"></script>
<script src="js/plugin/date/daterangepicker.js"></script>
<script type="text/javascript">

	// DO NOT REMOVE : GLOBAL FUNCTIONS!
	pageSetUp();
	// $('#yulanbox').affix({
	//     offset: {
	//       top: 170,
	//       bottom:20
	//     // , bottom: function () {
	//     //     return (this.bottom = $('#comments').outerHeight(true) + $('#footer').outerHeight(true))
	//     //   }
	//     }
	// });

	//调整表单部分的容器高度，以使其不小于预览容器
	$(function changeHeight(){
		var ylHeight = $("#yulanbox").height()+15;
		var icHeight = $("#inbox-content").height();
		$("#inbox-content").css("min-height",icHeight < ylHeight ? ylHeight:icHeight);
		//console.log(ylHeight+","+icHeight);
	})
	
	function addZhandian(){
		$('#myModal').modal();
	}

	// Load form valisation dependency 
	loadScript("js/plugin/jquery-form/jquery-form.min.js", runFormValidation);
	
	
	// Registration validation script
	function runFormValidation() {
		var $checkoutForm = $('#info-form').validate({
		// Rules for form validation
			rules : {
				drivername : {
					required : true,
					maxlength : 12
				},
				org : {
					required : true,
				},
				mobile_no : {
					required : true,
					number : true,
				},
			},
			// Messages for form validation
			messages : {
				drivername : {
					required : '必填项',
					maxlength : '最长12个字'
				},
				mobile_no : {
					required : '必填项',
					number : '11位数字'
				},
				org : {
					required : '必填项',
				},
			},
			// Do not change code below
			errorPlacement : function(error, element) {
				error.insertAfter(element.parent());
			}
		});
	}
</script>


